<template>
  <van-nav-bar title="商品分类" left-text="" />
  <van-tree-select
    v-model:main-active-index="activeIndex"
    height="100%"
    :items="items"
    @click-nav="getLists"
  >
    <template #content>
      <div class="mainWarp" style="background: #f3f3f3">
        <ul class="proul">
          <li v-for="item in list" :key="item.id">
            <RouterLink
              :to="{ path: '/product/info', query: { proid: item.id } }"
              ><img :src="item.thumbs_text"
            /></RouterLink>
            <RouterLink
              :to="{ path: '/product/info', query: { proid: item.id } }"
            >
              <p class="tit">{{ item.name }}</p>
            </RouterLink>
            <div class="price">
              <p>￥{{ item.price }}</p>
            </div>
          </li>
        </ul>
      </div>
    </template>
  </van-tree-select>
  <Footer />
</template>
<script setup>
import Footer from "@/components/common/footer.vue";
const { proxy } = getCurrentInstance();
let activeIndex = ref(0);
let items = ref([]);
let list = ref();
onBeforeMount(() => {
  getType();
  getListfirst();
});
let getType = async () => {
  let result = await Api.productType();
  if (result.code == 1) {
    items.value = result.data;
    items.value.unshift({ value: 0, text: "全部" });
  }
};
let getListfirst = async () => {
  let result = await Api.productLists();
  if (result.code == 1) {
    list.value = result.data;
  }
};
let getLists = async (index) => {
  const selectedId = items.value[index].value;
  let data = {
    typeid: selectedId,
  };
  let result = await Api.productLists(data);
  if (result.code == 1) {
    list.value = result.data;
  }
};
</script>
<style></style>
